<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-markup.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-none.min.js"></script><style>
        .article {
            position: relative;
            padding-bottom: 24px;
        }
        

        .bordered-element {
            border: 1px solid #c4c4c4;
            overflow: hidden;
        }
        

        .category {
            flex-wrap: wrap;
            padding-top: 8px;
        }
        

        .category-item {
            margin-bottom: 4px;
            margin-block-end: 0;
        }
        

        .category-link {
            margin-left: 0;
            padding-inline-start: 0;
            margin-block-start: 0;
            padding-bottom: 4px;
        }
        

        .category-title {
            padding-bottom: 8px;
        }
        

        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        

        .center-text {
            text-align: center;
        }
        

        .code-block {
            overflow: hidden;
            position: relative;
            padding: 0;
            border-radius: 8px;
            font-variant-ligatures: none;
            background-color: rgba(25, 25, 28, .05);
            word-break: break-all;
        }
        

        .container {
            max-width: 100%;
            overflow: hidden;
            page-break-inside: avoid;
            display: block;
        }
        

        .detached {
            margin-block-start: 0;
            margin-block-end: 0;
            margin-bottom: 8px;
        }
        

        .image {
            max-width: 100%;
            max-height: 90vh;
            height: auto;
        }
        

        .image-container {
            max-width: 100vw;
        }
        

        .image-size {
            height: auto;
        }
        

        .inline-code {
            border-radius: 4px;
            display: inline;
            padding: 2px 1px;
            font-family: JetBrains Sans,monospace;
            background: #e6e6e6;
        }
        

        .keystroke {
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            min-width: 22px;
            height: 22px;
            margin: 0 1px 2px;
            padding: 3px;
            border: 1px solid rgba(25, 25, 28, .2);
            border-radius: 4px;
            white-space: nowrap;
            background: rgba(25, 25, 28, .05);
            font-family: inherit;
            font-size: 14px;
            font-weight: 400;
            line-height: 1em;
            transition: border-color .5s;
        }
        

        .keystroke-after:not(:last-child):after {
            content: '+';
            font-size: 10px;
        }
        

        .list {
            list-style-type: disc;
            padding-left: 0;
            margin-left: 15px;
        }
        

        .list-decimal {
            list-style-type: decimal;
        }
        

        .list-item {
            margin-top: 6px;
            margin-bottom: 6px;
            margin-left: 4px;
        }
        

        .list-none {
            list-style-type: none;
        }
        

        .main-title {
            padding-bottom: 24px;
            margin-top: 0;
            font-size: 40px;
            margin-block-start: 0;
            margin-block-end: 0;
        }
        

        .prism {
            page-break-inside: avoid;
        }
        
        /* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+armasm+arturo+asciidoc+aspnet+asm6502+asmatmel+autohotkey+autoit+avisynth+avro-idl+awk+bash+basic+batch+bbcode+bbj+bicep+birb+bison+bnf+bqn+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+cilkc+cilkcpp+clojure+cmake+cobol+coffeescript+concurnas+csp+cooklang+coq+crystal+css-extras+csv+cue+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gap+gcode+gdscript+gedcom+gettext+gherkin+git+glsl+gn+linker-script+go+go-module+gradle+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+hoon+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keepalived+keyman+kotlin+kumir+kusto+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+magma+makefile+markdown+markup-templating+mata+matlab+maxscript+mel+mermaid+metafont+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+odin+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plant-uml+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+cshtml+jsx+tsx+reason+regex+rego+renpy+rescript+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+stata+iecst+stylus+supercollider+swift+systemd+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+tremor+turtle+twig+typescript+typoscript+unrealscript+uorazor+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+web-idl+wgsl+wiki+wolfram+wren+xeora+xml-doc+xojo+xquery+yaml+yang+zig&plugins=highlight-keywords */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre-wrap;word-spacing:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:16px;margin:0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

        

        .procedure-steps {
            box-sizing: border-box;
            padding: 8px 8px 2px 8px;
        }
        
        .procedure-steps ol {
            margin-block-end: 0;
            margin-block-start: 0;
        }
        

        :root {
            width: 95%;
            max-width: 95vw;
            padding: 0 0 0 30px;
        }
        
        body {
            font-family: JetBrains Sans,serif;
        }
        
        a {
            overflow-wrap: anywhere;
            width: 100vw;
        }
        
        
        @font-face {
            font-family: JetBrains Sans;
            src: url(https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff2) format("woff2"), url(https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Light.woff) format("woff");
            font-weight: 300;
            font-style: normal;
        }

        @font-face {
            font-family: JetBrains Sans;
            src: url(https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff2) format("woff2"), url(https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-Regular.woff) format("woff");
            font-weight: 400;
            font-style: normal;
        }

        @font-face {
            font-family: JetBrains Sans;
            src: url(https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff2) format("woff2"), url(https://resources.jetbrains.com/storage/jetbrains-sans/JetBrainsSans-SemiBold.woff) format("woff");
            font-weight: 600;
            font-style: normal;
        }
        
        
        code {
            display: inline;
            word-break: break-word;
            font-size: 15px;
            line-height: inherit;
            font-variant-ligatures: none;
            font-family: JetBrains Sans,monospace;
            white-space: pre-line;
            overflow-wrap: break-word;
        }
        
        figcaption {
            margin-top: 5px;
        }
        
        h2 {
            padding-top: 16px;
            padding-bottom: 8px;
            margin-block-start: 0;
            margin-block-end: 0;
        }
        
        h3 {
            padding-top: 8px;
            padding-bottom: 8px;
            margin-block-start: 0;
            margin-block-end: 0;
        }
        
        h4 {
            padding-top: 4px;
            padding-bottom: 8px;
            margin-block-start: 0;
            margin-block-end: 0;
        }
        
        p {
            padding: 0;
            border: 0;
            line-height: 25px;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-bottom: 8px;
        }
        
        div {
            display: block;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
            page-break-inside: avoid;
        }
        
        th, td {
            border: 1px solid #c4c4c4;
            padding: 10px;
            text-align: left;
            word-break: break-all;
        }
        
        .no-bold {
            font-weight: normal; 
        }
        
        .entry {
            display: grid;
            grid-template-columns: auto max-content;
            grid-template-areas: "chapter page";
            align-items: end;
            gap: 0 .25rem;
            line-height: 25px;
        }
        
        .toc-link-container{
            grid-area: chapter;
            position: relative;
            overflow: hidden;
        }
        
        .toc-link{
            text-decoration: none;
            color: black;
        }
        
        .toc-link-container::after {
            position: absolute;
            padding-left: .25ch;
            content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
            ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
            ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
            text-align: right;
        }
        
        .page {
            grid-area: page;
            width: 30px;
            text-align: right;
        }
        

        .secondary-title {
            font-size: 20px;
            margin-inline-start: 0;
            margin-block-end: 0;
            margin-block-start: 0;
        }
        

        .tab-content {
            padding: 16px;
        }
        
        .tab-content > *  {
            border: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        

        .tab-title  {
            font-size: 20px;
            margin-bottom: 10px;
        }
        

        .top-bottom-bordered-element {
            padding-top: 40px;
            overflow: hidden;
        }
        

        .topic {
            page-break-before: always;
        }
        </style><title>pdfSourceIN</title></head><body><div><section class="topic"><div><article class="article"><h1 class="main-title">Table of Contents</h1><div class="entry"><div class="toc-link-container"><a class="toc-link" href="#777760145">技术选型</a></div><div class="page">2</div></div><div class="entry"><div class="toc-link-container"><a class="toc-link" href="#661883185">git仓库创建</a></div><div class="page">5</div></div><div class="entry"><div class="toc-link-container"><a class="toc-link" href="#-1897185137">Starter</a></div><div class="page">11</div></div></article></div></section><section class="topic"><div><article class="article"><h1 class="main-title" id="777760145">技术选型</h1><section class="detached"><h2 id="777760145#-r6430u_3" data-toc="-r6430u_3#技术选型.md--r6430u_3">产品经理</h2><section class="detached"><h3 id="777760145#-r6430u_6" data-toc="-r6430u_6#技术选型.md--r6430u_6">工具</h3><ol class="list list-decimal" id="777760145#-r6430u_7" type="1" start="1"><li class="list-item" id="777760145#-r6430u_8"><p id="777760145#-r6430u_11">Axure (<a href="https://www.axure.com/">https://www.axure.com/</a>) （推荐，学生可申请免费使用一年）</p></li><li class="list-item" id="777760145#-r6430u_9"><p id="777760145#-r6430u_13">蓝湖 (<a href="https://lanhuapp.com/">https://lanhuapp.com/</a>)</p></li><li class="list-item" id="777760145#-r6430u_10"><p id="777760145#-r6430u_15">磨刀</p></li></ol></section></section><section class="detached"><h2 id="777760145#-r6430u_4" data-toc="-r6430u_4#技术选型.md--r6430u_4">前端开发</h2><section class="detached"><h3 id="777760145#-r6430u_16" data-toc="-r6430u_16#技术选型.md--r6430u_16">工具</h3><ol class="list list-decimal" id="777760145#-r6430u_18" type="1" start="1"><li class="list-item" id="777760145#-r6430u_19"><p id="777760145#-r6430u_22">hbuilderx (<a href="https://dcloud.io/hbuilderx.html">https://dcloud.io/hbuilderx.html</a>) （移动端开发必须）</p></li><li class="list-item" id="777760145#-r6430u_20"><p id="777760145#-r6430u_24">webstorm（推荐）</p></li><li class="list-item" id="777760145#-r6430u_21"><p id="777760145#-r6430u_25">vscode</p></li></ol></section><section class="detached"><h3 id="777760145#-r6430u_17" data-toc="-r6430u_17#技术选型.md--r6430u_17">技术栈</h3><section class="detached"><h4 id="777760145#-r6430u_26" data-toc="-r6430u_26#技术选型.md--r6430u_26">底层框架</h4><ol class="list list-decimal" id="777760145#-r6430u_29" type="1" start="1"><li class="list-item" id="777760145#-r6430u_30"><p id="777760145#-r6430u_32">vue.js（必须，版本需要大于3）</p></li><li class="list-item" id="777760145#-r6430u_31"><p id="777760145#-r6430u_33">node.js（必须）</p></li></ol></section><section class="detached"><h4 id="777760145#pc-ui" data-toc="pc-ui#技术选型.md-pc-ui">pc端ui组件库</h4><ol class="list list-decimal" id="777760145#-r6430u_34" type="1" start="1"><li class="list-item" id="777760145#-r6430u_35"><p id="777760145#-r6430u_37">element-plus (<a href="https://element-plus.org/zh-CN/">https://element-plus.org/zh-CN/</a>) （推荐）</p></li><li class="list-item" id="777760145#-r6430u_36"><p id="777760145#-r6430u_39">Ant Design Vue (<a href="https://www.antdv.com/docs/vue/introduce-cn">https://www.antdv.com/docs/vue/introduce-cn</a>)</p></li></ol></section><section class="detached"><h4 id="777760145#h5-ui" data-toc="h5-ui#技术选型.md-h5-ui">h5端ui组件库</h4><ol class="list list-decimal" id="777760145#-r6430u_41" type="1" start="1"><li class="list-item" id="777760145#-r6430u_42"><p id="777760145#-r6430u_43">uni-app (<a href="https://uniapp.dcloud.net.cn/">https://uniapp.dcloud.net.cn/</a>) （必须）</p></li></ol></section></section></section><section class="detached"><h2 id="777760145#-r6430u_5" data-toc="-r6430u_5#技术选型.md--r6430u_5">后端开发</h2><section class="detached"><h3 id="777760145#-r6430u_45" data-toc="-r6430u_45#技术选型.md--r6430u_45">工具</h3><ol class="list list-decimal" id="777760145#-r6430u_47" type="1" start="1"><li class="list-item" id="777760145#-r6430u_48"><p id="777760145#-r6430u_51">IDEA（必须）</p></li><li class="list-item" id="777760145#-r6430u_49"><p id="777760145#-r6430u_52">DataGrip</p></li><li class="list-item" id="777760145#-r6430u_50"><p id="777760145#-r6430u_53">FinalShell</p></li></ol></section><section class="detached"><h3 id="777760145#-r6430u_46" data-toc="-r6430u_46#技术选型.md--r6430u_46">技术栈</h3><section class="detached"><h4 id="777760145#-r6430u_54" data-toc="-r6430u_54#技术选型.md--r6430u_54">底层框架</h4><ol class="list list-decimal" id="777760145#-r6430u_57" type="1" start="1"><li class="list-item" id="777760145#-r6430u_58"><p id="777760145#-r6430u_60">springboot（熟练掌握，Java版本需要大于17）</p></li><li class="list-item" id="777760145#-r6430u_59"><p id="777760145#-r6430u_61">springcloud（熟悉）</p><ul class="list" id="777760145#-r6430u_62" start="1"><li class="list-item" id="777760145#-r6430u_63"><p id="777760145#-r6430u_65">nacos（了解）</p></li><li class="list-item" id="777760145#-r6430u_64"><p id="777760145#-r6430u_66">feign（熟悉）</p></li></ul></li></ol></section><section class="detached"><h4 id="777760145#-r6430u_55" data-toc="-r6430u_55#技术选型.md--r6430u_55">中间件</h4><ol class="list list-decimal" id="777760145#-r6430u_67" type="1" start="1"><li class="list-item" id="777760145#-r6430u_68"><p id="777760145#-r6430u_71">MySQL（熟悉）</p></li><li class="list-item" id="777760145#-r6430u_69"><p id="777760145#-r6430u_72">Redis（了解）</p></li><li class="list-item" id="777760145#-r6430u_70"><p id="777760145#-r6430u_73">Nginx（熟悉）</p></li></ol></section><section class="detached"><h4 id="777760145#-r6430u_56" data-toc="-r6430u_56#技术选型.md--r6430u_56">运维</h4><ol class="list list-decimal" id="777760145#-r6430u_74" type="1" start="1"><li class="list-item" id="777760145#-r6430u_75"><p id="777760145#-r6430u_77">Docker（熟练掌握）</p><ul class="list" id="777760145#-r6430u_78" start="1"><li class="list-item" id="777760145#-r6430u_79"><p id="777760145#-r6430u_82">镜像（熟悉）</p></li><li class="list-item" id="777760145#-r6430u_80"><p id="777760145#-r6430u_83">容器（熟悉）</p></li><li class="list-item" id="777760145#-r6430u_81"><p id="777760145#-r6430u_84">网络（了解）</p></li></ul></li><li class="list-item" id="777760145#-r6430u_76"><p id="777760145#-r6430u_85">Jenkins（了解）</p></li></ol></section></section></section></article></div></section><section class="topic"><div><article class="article"><h1 class="main-title" id="661883185">git仓库创建</h1><section class="detached"><h2 id="661883185#z7fyuxi_3" data-toc="z7fyuxi_3#git仓库创建.md-z7fyuxi_3">创建代码仓库流程</h2><section class="detached"><h3 id="661883185#z7fyuxi_4" data-toc="z7fyuxi_4#git仓库创建.md-z7fyuxi_4">点击新建仓库</h3><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_10" alt="image.png" title="image.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image.png" width="3431" height="1208"><figcaption class="center-text">image.png</figcaption></figure></div></section><section class="detached"><h3 id="661883185#z7fyuxi_5" data-toc="z7fyuxi_5#git仓库创建.md-z7fyuxi_5">填写仓库信息，注意选择私有</h3><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_11" alt="image_2.png" title="image_2.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_2.png" width="3431" height="1208"><figcaption class="center-text">image_2.png</figcaption></figure></div></section><section class="detached"><h3 id="661883185#z7fyuxi_6" data-toc="z7fyuxi_6#git仓库创建.md-z7fyuxi_6">复制远程地址</h3><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_12" alt="image_3.png" title="image_3.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_3.png" width="3431" height="1208"><figcaption class="center-text">image_3.png</figcaption></figure></div></section><section class="detached"><h3 id="661883185#z7fyuxi_7" data-toc="z7fyuxi_7#git仓库创建.md-z7fyuxi_7">创建本地代码仓库</h3><p id="661883185#z7fyuxi_13"><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_14" alt="image_4.png" title="image_4.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_4.png" width="1182" height="765"><figcaption class="center-text">image_4.png</figcaption></figure></div><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_15" alt="image_5.png" title="image_5.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_5.png" width="1704" height="713"><figcaption class="center-text">image_5.png</figcaption></figure></div></p></section><section class="detached"><h3 id="661883185#z7fyuxi_8" data-toc="z7fyuxi_8#git仓库创建.md-z7fyuxi_8">添加远程地址</h3><p id="661883185#z7fyuxi_16"><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_17" alt="image_6.png" title="image_6.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_6.png" width="1127" height="915"><figcaption class="center-text">image_6.png</figcaption></figure></div><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_18" alt="image_7.png" title="image_7.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_7.png" width="1046" height="864"><figcaption class="center-text">image_7.png</figcaption></figure></div></p></section><section class="detached"><h3 id="661883185#z7fyuxi_9" data-toc="z7fyuxi_9#git仓库创建.md-z7fyuxi_9">提交并推送代码</h3><p id="661883185#z7fyuxi_19"><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_20" alt="image_8.png" title="image_8.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_8.png" width="1071" height="657"><figcaption class="center-text">image_8.png</figcaption></figure></div><div class="container"><figure class="image-container"><img class="center image image-size" id="661883185#z7fyuxi_21" alt="image_9.png" title="image_9.png" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/image_9.png" width="1209" height="983"><figcaption class="center-text">image_9.png</figcaption></figure></div></p></section></section></article></div></section><section class="topic"><div><article class="article"><h1 class="main-title" id="-1897185137">Starter</h1><section class="detached"><h2 id="-1897185137#add-new-topics" data-toc="add-new-topics#starter.md-add-new-topics">Add new topics</h2><p id="-1897185137#-hxuvig_9">You can create empty topics, or choose a template for different types of content that contains some boilerplate structure to help you get started:</p><div class="container"><figure class="image-container"><img class="center bordered-element image" id="-1897185137#-hxuvig_10" alt="Create new topic options" title="Create new topic options" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/new_topic_options.png" width="290" height="220"><figcaption class="center-text">Create new topic options</figcaption></figure></div></section><section class="detached"><h2 id="-1897185137#write-content" data-toc="write-content#starter.md-write-content">Write content</h2><p id="-1897185137#-hxuvig_11">Writerside supports two types of markup: Markdown and XML. When you create a new help article, you can choose between two topic types, but this doesn't mean you have to stick to a single format. You can author content in Markdown and extend it with semantic attributes or inject entire XML elements.</p></section><section class="detached"><h2 id="-1897185137#inject-xml" data-toc="inject-xml#starter.md-inject-xml">Inject XML</h2><p id="-1897185137#-hxuvig_12">For example, this is how you inject a procedure:</p><section class="procedure-steps bordered-element detached"><h3 id="-1897185137#inject-a-procedure">Inject a procedure</h3><ol class="list list-decimal"><li class="list-item" id="-1897185137#-hxuvig_14"><p id="-1897185137#-hxuvig_16">Start typing and select a procedure type from the completion suggestions:</p><div class="container"><figure class="image-container"><img class="center bordered-element image image-size" id="-1897185137#-hxuvig_17" alt="completion suggestions for procedure" title="completion suggestions for procedure" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/completion_procedure.png" width="1207" height="258"><figcaption class="center-text">completion suggestions for procedure</figcaption></figure></div></li><li class="list-item" id="-1897185137#-hxuvig_15"><p id="-1897185137#-hxuvig_18">Press <span class="" id="-1897185137#-hxuvig_19"><span class="keystroke-after"><kbd class="keystroke">Tab</kbd></span></span> or <span class="" id="-1897185137#-hxuvig_20"><span class="keystroke-after"><kbd class="keystroke">Enter</kbd></span></span> to insert the markup.</p></li></ol></section></section><section class="detached"><h2 id="-1897185137#add-interactive-elements" data-toc="add-interactive-elements#starter.md-add-interactive-elements">Add interactive elements</h2><section class="detached"><h3 id="-1897185137#tabs" data-toc="tabs#starter.md-tabs">Tabs</h3><p id="-1897185137#-hxuvig_24">To add switchable content, you can make use of tabs (inject them by starting to type <span class="inline-code" id="-1897185137#-hxuvig_26">tab</span> on a new line):</p><div id="-1897185137#-hxuvig_25"><div class="detached" id="-1897185137#-hxuvig_27"><div class="tab-title"><div>Markdown</div></div><div class="bordered-element tab-content"><div class="detached code-block" id="-1897185137#-hxuvig_29"><pre><code class="language-none">![Alt Text](new_topic_options.png){ width=450 }</code></pre></div></div></div><div class="detached" id="-1897185137#-hxuvig_28"><div class="tab-title"><div>Semantic markup</div></div><div class="bordered-element tab-content"><div class="detached code-block" id="-1897185137#-hxuvig_30"><pre><code class="language-markup">&lt;img src=&quot;new_topic_options.png&quot; alt=&quot;Alt text&quot; width=&quot;450px&quot;/&gt;</code></pre></div></div></div></div></section><section class="detached"><h3 id="-1897185137#collapsible-blocks" data-toc="collapsible-blocks#starter.md-collapsible-blocks">Collapsible blocks</h3><p id="-1897185137#-hxuvig_31">Apart from injecting entire XML elements, you can use attributes to configure the behavior of certain elements. For example, you can collapse a chapter that contains non-essential information:</p><section class="detached"><h4 id="-1897185137#supplementary-info" data-toc="supplementary-info#starter.md-supplementary-info">Supplementary info</h4><p id="-1897185137#-hxuvig_33">Content under a collapsible header will be collapsed by default, but you can modify the behavior by adding the following attribute: <span class="inline-code" id="-1897185137#-hxuvig_34">default-state=&quot;expanded&quot;</span></p></section></section><section class="detached"><h3 id="-1897185137#convert-selection-to-xml" data-toc="convert-selection-to-xml#starter.md-convert-selection-to-xml">Convert selection to XML</h3><p id="-1897185137#-hxuvig_35">If you need to extend an element with more functions, you can convert selected content from Markdown to semantic markup. For example, if you want to merge cells in a table, it's much easier to convert it to XML than do this in Markdown. Position the caret anywhere in the table and press <span class="" id="-1897185137#-hxuvig_37"><span class="keystroke-after"><kbd class="keystroke">Alt</kbd></span><span class="keystroke-after"><kbd class="keystroke">Enter</kbd></span></span>:</p><div class="container"><figure class="image-container"><img class="center bordered-element image" id="-1897185137#-hxuvig_36" alt="Convert table to XML" title="Convert table to XML" src="C:/Users/huangpengfei/IdeaProjects/README/Writerside/images/convert_table_to_xml.png" width="706" height="196"><figcaption class="center-text">Convert table to XML</figcaption></figure></div></section></section><section class="detached"><h2 id="-1897185137#feedback-and-support" data-toc="feedback-and-support#starter.md-feedback-and-support">Feedback and support</h2><p id="-1897185137#-hxuvig_38">Please report any issues, usability improvements, or feature requests to our YouTrack project (<a href="https://youtrack.jetbrains.com/newIssue?project=WRS">https://youtrack.jetbrains.com/newIssue?project=WRS</a>) (you will need to register).</p><p id="-1897185137#-hxuvig_39">You are welcome to join our public Slack workspace (<a href="https://jb.gg/WRS_Slack">https://jb.gg/WRS_Slack</a>). Before you do, please read our Code of conduct (<a href="https://www.jetbrains.com/help/writerside/writerside-code-of-conduct.html">https://www.jetbrains.com/help/writerside/writerside-code-of-conduct.html</a>). We assume that you&rsquo;ve read and acknowledged it before joining.</p><p id="-1897185137#-hxuvig_40">You can also always email us at writerside@jetbrains.com (<a href="mailto:writerside@jetbrains.com">mailto:writerside@jetbrains.com</a>).</p></section><div class="top-bottom-bordered-element detached" id="-1897185137#-hxuvig_8"><h4 class="secondary-title">See also</h4><div class="category" id="-1897185137#-hxuvig_45"><h4 class="category-title">Writerside documentation</h4><ol class="list-none category-link"><li class="category-item">Configure Search (<a href="https://www.jetbrains.com/help/writerside/configure-search.html">https://www.jetbrains.com/help/writerside/configure-search.html</a>)</li><li class="category-item">Build and publish (<a href="https://www.jetbrains.com/help/writerside/local-build.html">https://www.jetbrains.com/help/writerside/local-build.html</a>)</li><li class="category-item">Reorder topics in the TOC (<a href="https://www.jetbrains.com/help/writerside/manage-table-of-contents.html">https://www.jetbrains.com/help/writerside/manage-table-of-contents.html</a>)</li><li class="category-item">Markup reference (<a href="https://www.jetbrains.com/help/writerside/markup-reference.html">https://www.jetbrains.com/help/writerside/markup-reference.html</a>)</li></ol></div></div></article></div></section></div></body></html>